<script>
import {
  ref,
  computed,
  onMounted,
  watch,
  reactive,
  shallowReactive,
} from "vue";

export default {
  props: {
    title: String,
    init: Number,
  },
  setup(props, { emit, slots, attrs }) {
    // const data = reactive({ count: 0, other: { count: 0 } });
    // data
    const count = ref(0);
    // methods
    const plus = () => {
      // 在 js 代码中，访问 ref 变量要使用 .value
      count.value++;
    };
    // 计算属性
    const double = computed(() => count.value * 2);
    // beforeCreate 和 created 生命周期钩子在 setup 中没有对应函数
    // 因为在 setup 函数中，本身就处于这个两个生命周期中。
    onMounted(() => {
      // 代码在相应生命周期中执行
      console.log("在组件加载（渲染）完成后执行");
    });
    // 侦听器
    watch(count, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    });
    //
    return {
      plus,
      emit,
      count,
      double,
    };
  },
};
</script>
<template>
  <div>
    {{ count }}
    <button class="mx-2 rounded-lg bg-blue-500 text-white p-2" @click="plus">
      plus
    </button>
    {{ title }}: {{ double }}
  </div>
</template>
